<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {margin: 0; padding: 0; border: none;}
			body,html {
				width: 100%; height: 100%; overflow: hidden;
			}
			body {
				background: black;
			}
			.fire {
				width: 3px;
				height: 30px;
				background: white;
				position: absolute;
			}
			.spark {
				width: 3px;
				height: 3px;
				position: absolute;
			}
		</style>
		<script src="move.js"></script>
		<script>
			onload = function(){
				
				//点击页面
				document.onclick = function(e){
					e = e || event;
					
					var x = e.pageX; 
					var y = e.pageY;
					
					//创建烟花
					fire(x, y);
				}
				
				//创建烟花,并发射
				function fire(x, y){
					
					//创建烟花节点
					var fireNode = document.createElement("div");
					document.body.appendChild(fireNode);
					fireNode.className = "fire"; 
					fireNode.style.left = x + "px";
					fireNode.style.top = document.documentElement.clientHeight-fireNode.offsetHeight + "px";
					
					
					//发射
					animate(fireNode, {top:y, height:3}, function(){
						document.body.removeChild(fireNode); //移除烟花节点
						
						//创建很多个小div
						var count = 30 + parseInt(Math.random()*31); //随机30~60 => 30 + 0~30
						for (var i=0; i<count; i++) {
							spark(x, y);	
						}
						
					});
				}
				
				//创建一个星火
				function spark(x, y){
					//创建星火节点
					var sparkNode = document.createElement("div");
					document.body.appendChild(sparkNode);
					sparkNode.className = "spark";
					sparkNode.style.left = x + "px";
					sparkNode.style.top = y + "px";
					sparkNode.style.backgroundColor = randomColor();
					
					//抛物线运动
					var xSpeed = parseInt(Math.random()*21) * (Math.random()>0.5 ? 1 : -1); //-20~20
					var ySpeed = parseInt(Math.random()*21) * (Math.random()>0.6 ? 1 : -1); //-20~20
					
					var timer = setInterval(function(){
						ySpeed++;
						sparkNode.style.left = sparkNode.offsetLeft + xSpeed + "px";
						sparkNode.style.top = sparkNode.offsetTop + ySpeed + "px";
						
						//如果超出界面
						if (sparkNode.offsetLeft < 0 
							|| sparkNode.offsetLeft > document.documentElement.clientWidth
							|| sparkNode.offsetTop > document.documentElement.clientHeight)
						{
							clearInterval(timer); //关闭定时器
							document.body.removeChild(sparkNode); //移除星火节点
						}
						
					}, 50);
					
					
				}
				
				//16进制的随机颜色
				//#ffffff
				function randomColor(){
					var arr = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
					var str = "#";
					for (var i=0; i<6; i++) {
						str += arr[ parseInt(Math.random()*16) ];
					}
					return str;
				}
				
				
			}
		</script>
	</head>
	<body>
		
	</body>
</html>
